<markup>
<section data-view-id = "page1">
	<header>视图1</header>

	<div data-view-rel = "page2" class = "btn">进入视图2</div>

	<div class = "forward" style = "display: none">
		<div class = "note">伪视图 ':forward' 代指返回前的视图</div>
		<div class = "btn forward">前进</div>
	</div>
</section>
<section data-view-id = "page2">
	<header><span class = "nav-back" data-view-rel = ":back"></span>视图2</header>

	<div class = "note">伪视图 ':back' 代指上一个浏览的视图</div>
	<div class = "btn" data-view-rel = ":back">返回</div>

	<div class = "note">伪视图 ':default-view' 代指默认视图</div>
	<div class = "btn" data-view-rel = ":default-view">首页</div>
</section>
</markup>
<link rel = "stylesheet" href = "demo/css/common.css"/>
<style>
.note{
	margin: 0.12rem;
	border-radius: 0.05rem;
	padding: 0.12rem;
	border: solid 1px #DDDDDD;
}
</style>
<script>
var page1 = View.ofId("page1");
var forwardBtnObj = page1.find(".btn.forward");

page1.on("enter", function(){
	if(page1.getActiveTimes() > 1)
		page1.find(".forward").style.display = "block";
});

/**
 * 编程式导航
 */
forwardBtnObj.addEventListener("click", function(){
	View.navTo(":forward");
});
</script>